<template>
  <BasicDrawer v-bind="$attrs"  @register="registerDrawer" title="设置标签地区" width="80%" @ok="handleSubmit" showFooter>
    <a-spin tip="加载中..." :spinning="useTagAreaListLoading">
      <a-row class="  p-2 my-1" v-for="item in useTagAreaList" :key="item.tagAreaConfigId">
        <a-col :span="2" ><a-checkbox v-model:checked="item.tagChecked" ><a-typography-title :level="5">{{item.name}}</a-typography-title></a-checkbox>   </a-col>
        <a-col :span="22">
          <a-textarea
            v-model:value="item.userCityList"
            placeholder="请输入城市,多个城市用,隔开"
          />
        </a-col>
      </a-row>
    </a-spin>
  </BasicDrawer>
</template>
<script lang="ts" setup>

import {BasicDrawer, useDrawerInner} from '/@/components/Drawer';
 import {reactive, ref} from "vue";
import {batchSet, userTagAreaList} from "@/views/clue/tagAreaConfig/ClueTagAreaConfig.api";
import {TreeSelect} from "ant-design-vue";
import {provinceAndCityData} from "@/components/Form/src/utils/areaDataUtil";
import {cloneDeep} from "lodash-es";
const emit = defineEmits(['success', 'register']);

/**
 * 获取配置项
 */
const useTagAreaList = ref([]);
const useTagAreaListLoading = ref(false)
const getUserTagArea = (userId) => {
  useTagAreaList.value = [];
  useTagAreaListLoading.value = true;
  userTagAreaList({userId}).then(res=>{
    const userAreaConfigList = res.map(item=>{
      item.tagChecked = item.userTagAreaId == item.tagAreaConfigId
     // item.userCityList = item.userCityList?item.userCityList.split(','):[]
      return item;
    });
    useTagAreaList.value = userAreaConfigList;

  }).finally(()=>{
    useTagAreaListLoading.value = false;
  })
}



const optUser = ref({})
// open
const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
  optUser.value = data.user

  getUserTagArea(data.user.id);
})

// 确定
const handleSubmit =async () => {

  try{
    setDrawerProps({confirmLoading:true})
   //  提交表单
    var submitList = cloneDeep(useTagAreaList.value);
    submitList = submitList.map(item=>{
      /*if (item.userCityList) {
        item.userCityList = item.userCityList.join(',')
      }*/
      item.userId = optUser.value.id;
     return item;
    })
   await batchSet(submitList)
    // 关闭弹窗
    closeDrawer()
    // 刷新列表
    emit('success',{})
  }finally {
    setDrawerProps({confirmLoading:false})
  }


}
</script>
